<template>
  <div class="register-page">
    <AuthForm title="注册" :onSubmit="handleRegister">
      <template #additional-links>
        <el-button link @click="navigateTo('/login')">已有账号?去登录</el-button>
        <el-button link @click="navigateTo('/')">访客访问</el-button>
      </template>
    </AuthForm>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import AuthForm from "@/components/AuthForm.vue";
import { useNavigate } from "@/hooks/useNavigate";

const { navigateTo } = useNavigate();

const handleRegister = (form) => {
  ElMessage.success("注册成功！");
  setTimeout(() => {
    navigateTo("/login");
  }, 1000);
};
</script>

<style scoped>
.register-page {
  width: 100%;
  height: 100vh;
  background: url("@/assets/login-bg.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
